<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>更新时的一个问题</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<!-- <input type="text" placeholder="请输入名字" v-model="keyWord"/>
			<button type="button" @click="sortType = 2">年龄升序</button>
			<button type="button" @click="sortType = 1">年龄降序</button>
			<button type="button" @click="sortType = 0">原顺序</button> -->
			<button type="button" @click="updateMei">更新马冬梅的信息</button>
			<ul>
				<li v-for="(person,index) in persons":key="person.id" >
					{{index}} - {{person.name}} - {{person.age}} - {{person.sex}}
				</li>
			</ul>
			
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false
			 
			   // 使用 computed实现
			   new Vue({
				   el:"#root",
				   data:{
				   		persons:[
				   			{
				   				id:"001",
				   				name:"马冬梅",
				   				age:38,
				   				sex:"女"
				   			},
				   			{
				   				id:"002",
				   				name:"周冬雨",
				   				age:19,
				   				sex:"女"
				   			},
				   			{
				   				id:"003",
				   				name:"周杰伦",
				   				age:20,
				   				sex:"男"
				   			},
				   			{
				   				id:"004",
				   				name:"温兆伦",
				   				age:28,
				   				sex:"男"
				   			}
				   		]
					},
					methods:{
						updateMei(){
							// this.persons[0].name="马老师", // 奏效
							// this.persons[0].age="20",
							// this.persons[0].sex="男"
							
						}
					}
					
			   })
			
		</script>
	</body>
</html>
